/*
 * uCharts®
 * 高性能跨平台图表库，支持H5、APP、小程序（微信/支付宝/百度/头条/QQ/360）、Vue、Taro等支持canvas的框架平台
 * Copyright (c) 2021 QIUN®秋云 https://www.ucharts.cn All rights reserved.
 * Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )
 * 复制使用请保留本段注释，感谢支持开源！
 *
 * uCharts®官方网站
 * https://www.uCharts.cn
 *
 * 开源地址:
 * https://gitee.com/uCharts/uCharts
 *
 * uni-app插件市场地址：
 * http://ext.dcloud.net.cn/plugin?id=271
 *
 */

// 主题颜色配置：如每个图表类型需要不同主题，请在对应图表类型上更改color属性
const color = [
	'#1890FF',
	'#91CB74',
	'#FAC858',
	'#EE6666',
	'#73C0DE',
	'#3CA272',
	'#FC8452',
	'#9A60B4',
	'#ea7ccc',
]

//事件转换函数，主要用作格式化x轴为时间轴，根据需求自行修改
const formatDateTime = (timeStamp, returnType) => {
	var date = new Date()
	date.setTime(timeStamp * 1000)
	var y = date.getFullYear()
	var m = date.getMonth() + 1
	m = m < 10 ? '0' + m : m
	var d = date.getDate()
	d = d < 10 ? '0' + d : d
	var h = date.getHours()
	h = h < 10 ? '0' + h : h
	var minute = date.getMinutes()
	var second = date.getSeconds()
	minute = minute < 10 ? '0' + minute : minute
	second = second < 10 ? '0' + second : second
	if (returnType == 'full') {
		return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second
	}
	if (returnType == 'y-m-d') {
		return y + '-' + m + '-' + d
	}
	if (returnType == 'h:m') {
		return h + ':' + minute
	}
	if (returnType == 'h:m:s') {
		return h + ':' + minute + ':' + second
	}
	return [y, m, d, h, minute, second]
}

const cfu = {
	//demotype为自定义图表类型，一般不需要自定义图表类型，只需要改根节点上对应的类型即可
	type: [
		'pie',
		'ring',
		'rose',
		'word',
		'funnel',
		'map',
		'arcbar',
		'line',
		'column',
		'mount',
		'bar',
		'area',
		'radar',
		'gauge',
		'candle',
		'mix',
		'tline',
		'tarea',
		'scatter',
		'bubble',
		'demotype',
	],
	range: [
		'饼状图',
		'圆环图',
		'玫瑰图',
		'词云图',
		'漏斗图',
		'地图',
		'圆弧进度条',
		'折线图',
		'柱状图',
		'山峰图',
		'条状图',
		'区域图',
		'雷达图',
		'仪表盘',
		'K线图',
		'混合图',
		'时间轴折线',
		'时间轴区域',
		'散点图',
		'气泡图',
		'自定义类型',
	],
	//增加自定义图表类型，如果需要categories，请在这里加入您的图表类型，例如最后的"demotype"
	//自定义类型时需要注意"tline","tarea","scatter","bubble"等时间轴（矢量x轴）类图表，没有categories，不需要加入categories
	categories: [
		'line',
		'column',
		'mount',
		'bar',
		'area',
		'radar',
		'gauge',
		'candle',
		'mix',
		'demotype',
	],
	//instance为实例变量承载属性，不要删除
	instance: {},
	//option为opts及eopts承载属性，不要删除
	option: {},
	//下面是自定义format配置，因除H5端外的其他端无法通过props传递函数，只能通过此属性对应下标的方式来替换
	formatter: {
		yAxisDemo1: function (val, index, opts) {
			return val + '元'
		},
		yAxisDemo2: function (val, index, opts) {
			return val.toFixed(2)
		},
		xAxisDemo1: function (val, index, opts) {
			return val + '年'
		},
		xAxisDemo2: function (val, index, opts) {
			return formatDateTime(val, 'h:m')
		},
		seriesDemo1: function (val, index, series, opts) {
			return val + '元'
		},
		tooltipDemo1: function (item, category, index, opts) {
			if (index == 0) {
				return '随便用' + item.data + '年'
			} else {
				return '其他我没改' + item.data + '天'
			}
		},
		pieDemo: function (val, index, series, opts) {
			if (index !== undefined) {
				return series[index].name + '：' + series[index].data + '元'
			}
		},
	},
	//这里演示了自定义您的图表类型的option，可以随意命名，之后在组件上 type="demotype" 后，组件会调用这个花括号里的option，如果组件上还存在opts参数，会将demotype与opts中option合并后渲染图表。
	demotype: {
		//我这里把曲线图当做了自定义图表类型，您可以根据需要随意指定类型或配置
		type: 'line',
		color: color,
		padding: [15, 10, 0, 15],
		xAxis: {
			disableGrid: true,
		},
		yAxis: {
			gridType: 'dash',
			dashLength: 2,
		},
		legend: {},
		extra: {
			line: {
				type: 'curve',
				width: 2,
			},
		},
	},
	//下面是自定义配置，请添加项目所需的通用配置
	pie: {
		type: 'pie',
		color: color,
		padding: [5, 5, 5, 5],
		extra: {
			pie: {
				activeOpacity: 0.5,
				activeRadius: 10,
				offsetAngle: 0,
				labelWidth: 15,
				border: true,
				borderWidth: 3,
				borderColor: '#FFFFFF',
			},
		},
	},
	ring: {
		type: 'ring',
		color: color,
		padding: [5, 5, 5, 5],
		rotate: false,
		dataLabel: true,
		legend: {
			show: true,
			position: 'right',
			lineHeight: 25,
		},
		title: {
			name: '收益率',
			fontSize: 15,
			color: '#666666',
		},
		subtitle: {
			name: '70%',
			fontSize: 25,
			color: '#7cb5ec',
		},
		extra: {
			ring: {
				ringWidth: 30,
				activeOpacity: 0.5,
				activeRadius: 10,
				offsetAngle: 0,
				labelWidth: 15,
				border: true,
				borderWidth: 3,
				borderColor: '#FFFFFF',
			},
		},
	},
	rose: {
		type: 'rose',
		color: color,
		padding: [5, 5, 5, 5],
		legend: {
			show: true,
			position: 'left',
			lineHeight: 25,
		},
		extra: {
			rose: {
				type: 'area',
				minRadius: 50,
				activeOpacity: 0.5,
				activeRadius: 10,
				offsetAngle: 0,
				labelWidth: 15,
				border: false,
				borderWidth: 2,
				borderColor: '#FFFFFF',
			},
		},
	},
	word: {
		type: 'word',
		color: color,
		extra: {
			word: {
				type: 'normal',
				autoColors: false,
			},
		},
	},
	funnel: {
		type: 'funnel',
		color: color,
		padding: [15, 15, 0, 15],
		extra: {
			funnel: {
				activeOpacity: 0.3,
				activeWidth: 10,
				border: true,
				borderWidth: 2,
				borderColor: '#FFFFFF',
				fillOpacity: 1,
				labelAlign: 'right',
			},
		},
	},
	map: {
		type: 'map',
		color: color,
		padding: [0, 0, 0, 0],
		dataLabel: true,
		extra: {
			map: {
				border: true,
				borderWidth: 1,
				borderColor: '#666666',
				fillOpacity: 0.6,
				activeBorderColor: '#F04864',
				activeFillColor: '#FACC14',
				activeFillOpacity: 1,
			},
		},
	},
	arcbar: {
		type: 'arcbar',
		color: color,
		title: {
			name: '百分比',
			fontSize: 25,
			color: '#00FF00',
		},
		subtitle: {
			name: '默认标题',
			fontSize: 15,
			color: '#666666',
		},
		extra: {
			arcbar: {
				type: 'default',
				width: 12,
				backgroundColor: '#E9E9E9',
				startAngle: 0.75,
				endAngle: 0.25,
				gap: 2,
			},
		},
	},
	line: {
		type: 'line',
		color: color,
		padding: [15, 10, 0, 15],
		xAxis: {
			disableGrid: true,
		},
		yAxis: {
			gridType: 'dash',
			dashLength: 2,
		},
		legend: {},
		extra: {
			line: {
				type: 'straight',
				width: 2,
				activeType: 'hollow',
			},
		},
	},
	tline: {
		type: 'line',
		color: color,
		padding: [15, 10, 0, 15],
		xAxis: {
			disableGrid: false,
			boundaryGap: 'justify',
		},
		yAxis: {
			gridType: 'dash',
			dashLength: 2,
			data: [
				{
					min: 0,
					max: 80,
				},
			],
		},
		legend: {},
		extra: {
			line: {
				type: 'curve',
				width: 2,
				activeType: 'hollow',
			},
		},
	},
	tarea: {
		type: 'area',
		color: color,
		padding: [15, 10, 0, 15],
		xAxis: {
			disableGrid: true,
			boundaryGap: 'justify',
		},
		yAxis: {
			gridType: 'dash',
			dashLength: 2,
			data: [
				{
					min: 0,
					max: 80,
				},
			],
		},
		legend: {},
		extra: {
			area: {
				type: 'curve',
				opacity: 0.2,
				addLine: true,
				width: 2,
				gradient: true,
				activeType: 'hollow',
			},
		},
	},
	column: {
		type: 'column',
		color: color,
		padding: [15, 15, 0, 5],
		xAxis: {
			disableGrid: true,
		},
		yAxis: {
			data: [{ min: 0 }],
		},
		legend: {},
		extra: {
			column: {
				type: 'group',
				width: 30,
				activeBgColor: '#000000',
				activeBgOpacity: 0.08,
			},
		},
	},
	mount: {
		type: 'mount',
		color: color,
		padding: [15, 15, 0, 5],
		xAxis: {
			disableGrid: true,
		},
		yAxis: {
			data: [{ min: 0 }],
		},
		legend: {},
		extra: {
			mount: {
				type: 'mount',
				widthRatio: 1.5,
			},
		},
	},
	bar: {
		type: 'bar',
		color: color,
		padding: [15, 30, 0, 5],
		xAxis: {
			boundaryGap: 'justify',
			disableGrid: false,
			min: 0,
			axisLine: false,
		},
		yAxis: {},
		legend: {},
		extra: {
			bar: {
				type: 'group',
				width: 30,
				meterBorde: 1,
				meterFillColor: '#FFFFFF',
				activeBgColor: '#000000',
				activeBgOpacity: 0.08,
			},
		},
	},
	area: {
		type: 'area',
		color: color,
		padding: [15, 15, 0, 15],
		xAxis: {
			disableGrid: true,
		},
		yAxis: {
			gridType: 'dash',
			dashLength: 2,
		},
		legend: {},
		extra: {
			area: {
				type: 'straight',
				opacity: 0.2,
				addLine: true,
				width: 2,
				gradient: false,
				activeType: 'hollow',
			},
		},
	},
	radar: {
		type: 'radar',
		color: color,
		padding: [5, 5, 5, 5],
		dataLabel: false,
		legend: {
			show: true,
			position: 'right',
			lineHeight: 25,
		},
		extra: {
			radar: {
				gridType: 'radar',
				gridColor: '#CCCCCC',
				gridCount: 3,
				opacity: 0.2,
				max: 200,
				labelShow: true,
			},
		},
	},
	gauge: {
		type: 'gauge',
		color: color,
		title: {
			name: '66Km/H',
			fontSize: 25,
			color: '#2fc25b',
			offsetY: 50,
		},
		subtitle: {
			name: '实时速度',
			fontSize: 15,
			color: '#1890ff',
			offsetY: -50,
		},
		extra: {
			gauge: {
				type: 'default',
				width: 30,
				labelColor: '#666666',
				startAngle: 0.75,
				endAngle: 0.25,
				startNumber: 0,
				endNumber: 100,
				labelFormat: '',
				splitLine: {
					fixRadius: 0,
					splitNumber: 10,
					width: 30,
					color: '#FFFFFF',
					childNumber: 5,
					childWidth: 12,
				},
				pointer: {
					width: 24,
					color: 'auto',
				},
			},
		},
	},
	candle: {
		type: 'candle',
		color: color,
		padding: [15, 15, 0, 15],
		enableScroll: true,
		enableMarkLine: true,
		dataLabel: false,
		xAxis: {
			labelCount: 4,
			itemCount: 40,
			disableGrid: true,
			gridColor: '#CCCCCC',
			gridType: 'solid',
			dashLength: 4,
			scrollShow: true,
			scrollAlign: 'left',
			scrollColor: '#A6A6A6',
			scrollBackgroundColor: '#EFEBEF',
		},
		yAxis: {},
		legend: {},
		extra: {
			candle: {
				color: {
					upLine: '#f04864',
					upFill: '#f04864',
					downLine: '#2fc25b',
					downFill: '#2fc25b',
				},
				average: {
					show: true,
					name: ['MA5', 'MA10', 'MA30'],
					day: [5, 10, 20],
					color: ['#1890ff', '#2fc25b', '#facc14'],
				},
			},
			markLine: {
				type: 'dash',
				dashLength: 5,
				data: [
					{
						value: 2150,
						lineColor: '#f04864',
						showLabel: true,
					},
					{
						value: 2350,
						lineColor: '#f04864',
						showLabel: true,
					},
				],
			},
		},
	},
	mix: {
		type: 'mix',
		color: color,
		padding: [15, 15, 0, 15],
		xAxis: {
			disableGrid: true,
		},
		yAxis: {
			disabled: false,
			disableGrid: false,
			splitNumber: 5,
			gridType: 'dash',
			dashLength: 4,
			gridColor: '#CCCCCC',
			padding: 10,
			showTitle: true,
			data: [],
		},
		legend: {},
		extra: {
			mix: {
				column: {
					width: 20,
				},
			},
		},
	},
	scatter: {
		type: 'scatter',
		color: color,
		padding: [15, 15, 0, 15],
		dataLabel: false,
		xAxis: {
			disableGrid: false,
			gridType: 'dash',
			splitNumber: 5,
			boundaryGap: 'justify',
			min: 0,
		},
		yAxis: {
			disableGrid: false,
			gridType: 'dash',
		},
		legend: {},
		extra: {
			scatter: {},
		},
	},
	bubble: {
		type: 'bubble',
		color: color,
		padding: [15, 15, 0, 15],
		xAxis: {
			disableGrid: false,
			gridType: 'dash',
			splitNumber: 5,
			boundaryGap: 'justify',
			min: 0,
			max: 250,
		},
		yAxis: {
			disableGrid: false,
			gridType: 'dash',
			data: [
				{
					min: 0,
					max: 150,
				},
			],
		},
		legend: {},
		extra: {
			bubble: {
				border: 2,
				opacity: 0.5,
			},
		},
	},
}

export default cfu
